<template>
  <van-tabs v-model:active="active" animated>
    <van-tab
      ><template #title>
        <van-icon name="contact" size="16px" />
        {{ isSameUser ? "我" : "Ta" }}创建的
      </template></van-tab
    >
    <van-tab
      ><template #title>
        <van-icon name="user-circle-o" size="16px" />
        {{ isSameUser ? "我" : "Ta" }}加入的
      </template></van-tab
    >
  </van-tabs>
  <div>
    <template v-if="active === 0">
      <team-card-list
        :teamList="teamListByCreate"
        qd="2"
        :userId="userId"
      /><van-button
        v-if="isSameUser"
        class="add-button"
        type="primary"
        icon="plus"
        @click="toAddTeam"
      />
      <van-empty
        v-if="teamListByCreate?.length < 1"
        :description="`${isSameUser ? '快去创建个队伍吧' : 'Ta还没有开过团'}`"
      />
    </template>
    <template v-if="active === 1"
      ><team-card-list
        :teamList="teamListByJoin"
        qd="1"
        :userId="userId"
      /><van-button
        v-if="isSameUser"
        class="add-button"
        type="success"
        icon="share-o"
        @click="toFindTeam"
      />
      <van-empty
        v-if="teamListByJoin?.length < 1"
        :description="`${
          isSameUser ? '快去加入个队伍吧' : 'Ta还没有加入过队伍'
        }`"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import myAxios from "../plugins/myAxios";
import TeamCardList from "../components/TeamCardList.vue";
import { showFailToast } from "vant";
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

const active = ref(0); //切换查询类别
watch(active, () => {
  if (active.value === 0) {
    listTeamByCreate();
  } else {
    listTeamByJoin();
  }
});

const route = useRoute();
const userId = ref(0);
const currentUserId = route.query.currentUserId;
const teamListByJoin = ref([]);
const listTeamByJoin = async () => {
  const res = await myAxios.get("/userTeam/join", {
    params: {
      userId: userId.value,
    },
  });
  if (res.code === 0) {
    teamListByJoin.value = res.data;
  } else {
    showFailToast("小智遗憾告知:加载失败!!请刷新重试");
  }
};
const teamListByCreate = ref([]);
const listTeamByCreate = async () => {
  const res = await myAxios.get("/userTeam/create", {
    params: {
      userId: userId.value,
    },
  });
  if (res.code === 0) {
    teamListByCreate.value = res.data;
  } else {
    showFailToast("小智遗憾告知:加载失败!!请刷新重试");
  }
};

/**
 * 跳转到加入队伍页
 */
const router = useRouter();
const toFindTeam = () => {
  router.push({
    path: "/team",
  });
};

/**
 * 跳转到创建队伍页
 */
const toAddTeam = () => {
  router.push({
    path: "/team/update",
    query: {
      id: 0,
      userId: userId.value,
    },
  });
};

const isSameUser = ref(true); //当前访问的主页是否为自己的
onMounted(async () => {
  userId.value = Number(
    route.query.userId !== "0" ? route.query.userId : currentUserId
  );
  if (currentUserId) {
    isSameUser.value = userId.value == currentUserId;
  }
  listTeamByCreate();
});
</script>

<style scoped>
@import "../assets/css/public.css";
@import "../assets/css/public.css";
</style>
